<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>3D照片墙</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        /* 正方向0-40度 */
        @keyframes rotateY1 {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(40deg);
            }
        }

        /* 正方向40-80度 */
        @keyframes rotateY2 {
            from {
                transform: rotateY(40deg);
            }
            to {
                transform: rotateY(80deg);
            }
        }

        /* 正方向80-120度 */
        @keyframes rotateY3 {
            from {
                transform: rotateY(80deg);
            }
            to {
                transform: rotateY(120deg);
            }
        }

        /* 正方向120-160度 */
        @keyframes rotateY4 {
            from {
                transform: rotateY(120deg);
            }
            to {
                transform: rotateY(160deg);
            }
        }

        /* 正方向160-200度 */
        @keyframes rotateY5 {
            from {
                transform: rotateY(160deg);
            }
            to {
                transform: rotateY(200deg);
            }
        }

        /* 正方向200-240度 */
        @keyframes rotateY6 {
            from {
                transform: rotateY(200deg);
            }
            to {
                transform: rotateY(240deg);
            }
        }

        /* 正方向240-280度 */
        @keyframes rotateY7 {
            from {
                transform: rotateY(240deg);
            }
            to {
                transform: rotateY(280deg);
            }
        }

        /* 正方向280-320度 */
        @keyframes rotateY8 {
            from {
                transform: rotateY(280deg);
            }
            to {
                transform: rotateY(320deg);
            }
        }

        /* 正方向320-360度 */
        @keyframes rotateY9 {
            from {
                transform: rotateY(320deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }


        /* 负方向0-40度 */
        @keyframes rotate-Y1 {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(-40deg);
            }
        }

        /* 负方向40-80度 */
        @keyframes rotate-Y2 {
            from {
                transform: rotateY(-40deg);
            }
            to {
                transform: rotateY(-80deg);
            }
        }

        /* 负方向80-120度 */
        @keyframes rotate-Y3 {
            from {
                transform: rotateY(-80deg);
            }
            to {
                transform: rotateY(-120deg);
            }
        }

        /* 负方向120-160度 */
        @keyframes rotate-Y4 {
            from {
                transform: rotateY(-120deg);
            }
            to {
                transform: rotateY(-160deg);
            }
        }

        /* 负方向160-200度 */
        @keyframes rotate-Y5 {
            from {
                transform: rotateY(-160deg);
            }
            to {
                transform: rotateY(-200deg);
            }
        }

        /* 负方向200-240度 */
        @keyframes rotate-Y6 {
            from {
                transform: rotateY(-200deg);
            }
            to {
                transform: rotateY(-240deg);
            }
        }

        /* 负方向240-280度 */
        @keyframes rotate-Y7 {
            from {
                transform: rotateY(-240deg);
            }
            to {
                transform: rotateY(-280deg);
            }
        }

        /* 负方向280-320度 */
        @keyframes rotate-Y8 {
            from {
                transform: rotateY(-280deg);
            }
            to {
                transform: rotateY(-320deg);
            }
        }

        /* 负方向320-360度 */
        @keyframes rotate-Y9 {
            from {
                transform: rotateY(-320deg);
            }
            to {
                transform: rotateY(-360deg);
            }
        }


        body {
            background: #f9f9f9;
        }


        .my-container {
            width: 800px;
            height: 500px;
            margin: 20px auto;
            /*border: 1px solid red;*/
        }

        .photo-wrap {
            perspective: 800px;
            width: 800px;
        }

        .container {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            transform-style: preserve-3d;
        }

        .img {
            width: 200px;
            height: 118px;
            line-height: 118px;
            text-align: center;
            position: absolute;
            top: 160px;
            left: 300px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
            background: pink;
        }

        .img01 {
            transform: rotateY(0deg) translateZ(300px);
        }
        .img02 {
            transform: rotateY(40deg) translateZ(300px);
        }
        .img03 {
            transform: rotateY(80deg) translateZ(300px);
        }
        .img04 {
            transform: rotateY(120deg) translateZ(300px);
        }
        .img05 {
            transform: rotateY(160deg) translateZ(300px);
        }
        .img06 {
            transform: rotateY(200deg) translateZ(300px);
        }
        .img07 {
            transform: rotateY(240deg) translateZ(300px);
        }
        .img08 {
            transform: rotateY(280deg) translateZ(300px);
        }
        .img09 {
            transform: rotateY(320deg) translateZ(300px);
        }


        .prev {
            width: 30px;
            height: 70px;
            color: #6d8099;
            float: left;
            font-size: 22px;
            background: #ddd;
            line-height: 70px;
            text-align: center;
            position: relative;
            bottom: -175px;
            border-radius: 5px;
            z-index: 100;
        }
        .next {
            width: 30px;
            height: 70px;
            color: #6d8099;
            float: right;
            font-size: 22px;
            background: #ddd;
            line-height: 70px;
            text-align: center;
            position: relative;
            bottom: -175px;
            border-radius: 5px;
            z-index: 100;
        }
    </style>
</head>

<body class="body">
<div class="my-container">
    <!-- <div class="prev"><</div> -->
    <div class="photo-wrap">  <!-- 舞台 -->
        <div class="container">   <!-- 容器 -->
            <div class="img img01">1</div>
            <div class="img img02">2</div>
            <div class="img img03">3</div>
            <div class="img img04">4</div>
            <div class="img img05">5</div>
            <div class="img img06">6</div>
            <div class="img img07">7</div>
            <div class="img img08">8</div>
            <div class="img img09">9</div>
        </div>
    </div>
    <!-- <div class="next">></div> -->
</div>



<script>
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone","iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    var now = 1;
    var changeImg = function(flag) {

        var str = flag == 'next' ? '-' : '';
        var className = 'rotate' + str + 'Y' + now;

        $('.container').removeAttr('style').css('animation', className + ' 1s ease-in-out forwards');

        now = (now+1) > 9 ? 1 : (now+1);
    }

    var timer = setInterval(function() {
        changeImg('next');
    }, 3000);

    if(IsPC()) {  //电脑访问
        $('.prev').click(function() {
            clearInterval(timer);
            changeImg('prev');
        });
        $('.next').click(function() {
            clearInterval(timer);
            changeImg('next');
        });
    } else {
        $('.prev').tap(function() {
            clearInterval(timer);
            changeImg('prev');
        });
        $('.next').tap(function() {
            clearInterval(timer);
            changeImg('next');
        });
    }
</script>
</body>

</html>